import React from 'react'
import { Link, Route } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home' // 路由组件，匹配路由
import Header from './components/Header' // 一般组件，不带路由

import './App.css'

function App() {
  return (
    <>
      <div className='row'>
        <div className='col-xs-offset-2 col-sx-8'>
          <Header />
        </div>
      </div>
      <div className='row'>
        <div className='col-xs-2 col-xs-offset-2'>
          <div className='list-group'>
            <Link className='list-group-item' to='/about'>
              About
            </Link>
            <Link className='list-group-item' to='/home'>
              Home
            </Link>
          </div>
        </div>
        <div className='col-xs-6'>
          <div className='panel'>
            <div className='panel-body'>
              <Route path='/about' component={About} />
              <Route path='/home' component={Home} />
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default App
